import React, { Component } from 'react';
import { DatePicker, Select } from 'antd';
import moment from 'moment';
import './index.less';

const dateFormat = 'YYYY-MM-DD';

const { Option } = Select;

class Td extends Component {
  educations = [
    { title: '高中', value: '1' },
    { title: '大专', value: '2' },
    { title: '本科', value: '3' },
    { title: '研究生', value: '4' },
    { title: '其他', value: '5' },
  ];
  constructor(props) {
    super(props);
    this.state = {
      newEducation: this.props.value,
    };
  }
  handlOnChange=(value, key) => {
    const { newEducation } = this.state;
    newEducation[key] = value;
    this.setState({ newEducation: { ...this.state.newEducation } });
    console.log(value, key);
  }
  delTd=(index) => {
    this.props.delTd(index);
  }
  render() {
    const { index } = this.props;
    const { newEducation } = this.state;
    console.log(this.educations);
    return (
      <React.Fragment>
        <td>{index + 1}</td>
        <td>
          <DatePicker
            placeholder="入学时间"
            style={{ margin: 0, width: 120 }}
            value={!newEducation.start_date ? null : moment(newEducation.start_date, dateFormat)}
            format={dateFormat}
            onChange={(date, dateString) => this.handlOnChange(dateString, 'start_date')}
          />
        </td>
        <td>
          <DatePicker
            placeholder="毕业时间"
            style={{ margin: 0, width: 120 }}
            value={!newEducation.end_date ? null : moment(newEducation.end_date, dateFormat)}
            format={dateFormat}
            onChange={(date, dateString) => this.handlOnChange(dateString, 'end_date')}
          />
        </td>
        <td>
          <input
            className="education-input"
            type="text"
            value={newEducation.name || ''}
            onChange={e => this.handlOnChange(e.target.value, 'name')}
          />
        </td>
        <td>
          <input
            className="education-input"
            type="text"
            value={newEducation.professional || ''}
            onChange={e => this.handlOnChange(e.target.value, 'professional')}
          />
        </td>
        <td>
          <Select
            showSearch
            style={{ width: 70 }}
            value={newEducation.education}
            placeholder="选择合同类型"
            onChange={value => this.handlOnChange(value, 'education')}
            optionFilterProp="children"
            filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
          >
            {
              this.educations.map((value, index) => (
                <Option value={value.value} key={index}>{value.title}</Option>
                  ))
              }
          </Select>
        </td>
        <td>
          <input
            className="education-input"
            type="text"
            value={newEducation.code || ''}
            onChange={e => this.handlOnChange(e.target.value, 'code')}
          />
        </td>
        <td><button className="clearButton" onClick={() => this.delTd(index)}>删除此行</button></td>
      </React.Fragment>
    );
  }
}

export default Td;
